import React from 'react';

interface SquareProps {
    color: string;
    onClick: () => void;
    visible: boolean;
    borderStyle: boolean; // 新增 borderStyle 属性
}

const Square: React.FC<SquareProps> = ({ color, onClick, visible, borderStyle }) => {
    return (
        <div
            onClick={onClick}
            style={{
                width: '60px',
                height: '60px',
                backgroundColor: visible ? color : 'transparent',
                border: borderStyle ? '2px solid black' : 'none', // 根据 borderStyle 设置边框
                margin: '5px',
                cursor: 'pointer',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
        </div>
    );
};

export default Square;
